<template>
  <div class="date-content">
    <!-- <el-icon color="#59D2FF" size="90"><Location /></el-icon> -->
    <span class="bigtxt">天气</span>
    <span class="bigtxt">11 - 10°C</span>
    <el-divider direction="vertical" class="line" />
    <span class="smalltxt">晴天 &nbsp ☀️</span>
    <div class="btn-panel" @click="backjdzl">退出</div>
  </div>
  <div class="border-left"></div>
</template>
<script setup>
const router = useRouter();
const backjdzl = () => {
  router.push("/jdzh");
};
</script>


<style lang="scss" scoped>
.date-content {
  width: 1920px;
  height: 135px;
  display: flex;
  align-items: bottom;
  gap: 45px;
  background: url("@/assets/images/ar/arlt.png") no-repeat;
  background-size: 100% 100%;
  padding-top: 24px;
  padding-left: 86.5px;
  position: relative;
  .btn-panel {
    position: absolute;
    right: 45px;
    top: 10px;
    width: 210px;
    height: 56px;
    cursor: pointer;
    font-family: YouSheBiaoTiHei;
    font-size: 30px;
    color: #ffffff;
    line-height: 54px;
    text-align: center;
    background: url("@/assets/images/ar/gdsbbg.png") no-repeat;
    background-size: 100% 100%;
  }
  .line {
    width: 4px;
    height: 22.5px;
    background: #ffffff;
    margin-top: 8px;
  }
  .bigtxt {
    font-family: YouSheBiaoTiHei;
    font-size: 30px;
    color: #ffffff;
    line-height: 39px;
    text-shadow: 0px 0px 4px #0091ff;
  }
  .smalltxt {
    font-family: YouSheBiaoTiHei;
    font-size: 30px;
    color: #ffffff;
    line-height: 39px;
    text-shadow: 0px 0px 4px #0091ff;
  }
}
</style>